import React, { useState, useMemo } from'react';


function ListItem({ item }) {
    console.log(`Rendering item: ${item}`);
    return <li>{item}</li>;
}


function List({ items }) {
    const memoizedItems = useMemo(() => {
        return items.map((item, index) => <ListItem key={index} item={item} />);
    }, [items]);


    return (
        <ul>
            {memoizedItems}
        </ul>
    );
}


function App() {
    const [count, setCount] = useState(0);
    const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);


    return (
        <div>
            <h1>List Component</h1>
            <List items={items} />
            <button onClick={() => setCount(count + 1)}>Increment Count</button>
            <button onClick={() => setItems([...items, `Item ${items.length + 1}`])}>Add Item</button>
        </div>
    );
}


export default App;